<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态样式绑定</title>
    <script src="../../js/vue.js"></script>
    <style>
        .白色 {
            background-color: white;
        }
        .黑色 {
            background-color: #000000;
        }
        .红色 {
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="app" :class="currentTheme" :style="themeStyles">
    <h1>主题切换演示</h1>
    <button @click="switchTheme('白色')">白色</button>
    <button @click="switchTheme('黑色')">黑色</button>
    <button @click="switchTheme('红色')">红色</button>
    
    <p>当前主题: {{ currentTheme }}</p>
  </div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            currentTheme: '白色',
        },
        methods: {
            switchTheme(theme) {
                this.currentTheme = theme;
            }
        }
    });
  </script>